<!--onlyoffice 编辑器-->
<template>
    <div id="vabOnlyOffice"></div>
  </template>
    
    <script>
  export default {
    name: "VabOnlyOffice",
    props: {
      option: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    data() {
      return {
        doctype: "",
        docEditor: null,
      };
    },
    beforeDestroy() {
      if (this.docEditor !== null) {
        this.docEditor.destroyEditor();
        this.docEditor = null;
      }
    },
    watch: {
      option: {
        handler: function (n) {
          this.setEditor(n);
          this.doctype = this.getFileType(n.fileType);
        },
        deep: true,
      },
    },
    mounted() {
      if (this.option.url) {
        this.setEditor(this.option);
      }
    },
    methods: {
      async setEditor(option) {
        if (this.docEditor !== null) {
          this.docEditor.destroyEditor();
          this.docEditor = null;
        }
        this.doctype = this.getFileType(option.fileType);
        let config = {
          document: {
            //后缀
            fileType: option.fileType,
            key: option.key || "",
            title: option.title,
            permissions: {
              edit: option.isEdit, //是否可以编辑: 只能查看，传false
              print: option.isPrint,
              download: false,
              // "fillForms": true,//是否可以填写表格，如果将mode参数设置为edit，则填写表单仅对文档编辑器可用。 默认值与edit或review参数的值一致。
              // "review": true //跟踪变化
            },
            url: option.url,
          },
          documentType: this.doctype,
          editorConfig: {
            callbackUrl: option.editUrl, //"编辑word后保存时回调的地址，这个api需要自己写了，将编辑后的文件通过这个api保存到自己想要的位置
            lang: option.lang, //语言设置
            //定制
            customization: {
              autosave: false, //是否自动保存
              chat: false,
              comments: false,
              help: false,
              // "hideRightMenu": false,//定义在第一次加载时是显示还是隐藏右侧菜单。 默认值为false
              //是否显示插件
              plugins: false,
            },
            user: {
              id: option.user.id,
              name: option.user.name,
            },
            mode: option.model ? option.model : "edit",
          },
          width: "100%",
          height: "100%",
          token: option.token || "",
        };
  
        // eslint-disable-next-line no-undef,no-unused-vars
        this.docEditor = new DocsAPI.DocEditor("vabOnlyOffice", config);
      },
      getFileType(fileType) {
        let docType = "";
        let fileTypesDoc = [
          "doc",
          "docm",
          "docx",
          "dot",
          "dotm",
          "dotx",
          "epub",
          "fodt",
          "htm",
          "html",
          "mht",
          "odt",
          "ott",
          "pdf",
          "rtf",
          "txt",
          "djvu",
          "xps",
        ];
        let fileTypesCsv = [
          "csv",
          "fods",
          "ods",
          "ots",
          "xls",
          "xlsm",
          "xlsx",
          "xlt",
          "xltm",
          "xltx",
        ];
        let fileTypesPPt = [
          "fodp",
          "odp",
          "otp",
          "pot",
          "potm",
          "potx",
          "pps",
          "ppsm",
          "ppsx",
          "ppt",
          "pptm",
          "pptx",
        ];
        if (fileTypesDoc.includes(fileType)) {
          docType = "text";
        }
        if (fileTypesCsv.includes(fileType)) {
          docType = "spreadsheet";
        }
        if (fileTypesPPt.includes(fileType)) {
          docType = "presentation";
        }
        return docType;
      },
    },
  };
  </script>
    <style>
  </style>